<template>
    <div>
        <div id="root">
            <div class="box">
                <img src="@/assets/img.jpg" alt="">
                <div @mousemove="mood" class="covers"></div>
                <div class="cover" :style="tran"></div>
            </div>
            <div class="box1">
                <img src="@/assets/imgBig.jpg" ref="big">
            </div>
        </div>

<!-- --------------------------------------------------- -->
        <div class="spec-preview">
            <img src="@/assets/img.jpg" />
            <div class="event" @mousemove="handler"></div>
            <div class="big">
            <img src="@/assets/imgBig.jpg" ref="big" />
            </div>
            <div class="mask" ref="mask"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        tran: { top: "", left: "" }
      };
    },
    methods: {
        mood(e) {
                    let big = this.$refs.big;
                    let leftX = e.offsetX;
                    let topY = e.offsetY
                    if (topY <= 50) {
                        topY = 50
                    } else if (topY > 250) {
                        topY = 250
                    }
                    if (leftX <= 50) {
                        leftX = 50
                    } else if (leftX > 450) {
                        leftX = 450
                    }
                    this.tran.top = topY - 50 + 'px';
                    this.tran.left = leftX - 50 + 'px';
                    big.style.left= -2* leftX + 'px';
                    big.style.top= -2* topY + 'px';
                },


                handler(event) {
                    let mask = this.$refs.mask;
                    let big = this.$refs.big;
                    let left = event.offsetX - mask.offsetWidth / 2;
                    let top = event.offsetY - mask.offsetHeight / 2;
                    //约束范围
                    if (left <= 0) left = 0;
                    if (left >= mask.offsetWidth) left = mask.offsetWidth;
                    if (top <= 0) top = 0;
                    if (top >= mask.offsetHeight) top = mask.offsetHeight;
                    mask.style.left = left + "px";
                    mask.style.top = top + "px";
                    big.style.left = -2 * left + "px";
                    big.style.top = -2 * top + "px";
                    // console.log(left);
                    },
    }
  }
</script>
<style lang="less" scoped>
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 500px;
            height: 300px;
            position: relative;
 
        }
 
        .box img {
            width: 100%;
            height: 100%;
        }
 
        .box .cover {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
        }
 
        .covers {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .box1 {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 50px;
            left: 600px;
            overflow: hidden;
        }
        .box1 img{
            width: 300%;
            height: 300%;
            position: absolute;
            z-index: 9999;
        }



        // ---------------------
        .spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 100%;
    height: 100%;
  }

  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }

  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(171, 250, 171, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;

    img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
</style>